<template>
	<view class="content" :style="{paddingTop:totalheight}" :class="deal_status!=5? 'pb_15' : ''">
		<view class="top" :style="{height:totalheight}">
			<view :style="{ paddingTop: topheight,height:navheight,lineHeight:navheight }" class="nav">
				<image src="../../static/img/left.png" mode="widthFix" @click="back"></image>
				<view>还款计划表{{index}}</view>
			</view>
		</view>
		<view class="info" v-for="(item,i) in list" @click="clickInd(i,item.isclick,item.has_repay)">
			<view class="i_left" v-if="item.has_repay==1">
				<uni-icons class="radio" type="checkbox-filled" color="#999999" size="24"></uni-icons>
			</view>
			<view class="i_left" v-if="item.has_repay==0">
				<uni-icons v-if="item.isclick" class="radio" type="checkbox-filled" color="#E99552"
					size="24"></uni-icons>
				<uni-icons v-else class="radio" type="circle" color="#999999" size="24"></uni-icons>
			</view>
			<view class="i_right">
				<!-- <image v-if="item.is_yuqi==1" class="yuqi" src="@/static/img/yuqi_2.png" mode="widthFix"></image> -->
				<image v-if="item.is_site_bad==1" class="yuqi" src="@/static/img/huaiz.png" mode="widthFix"></image>
				<image v-if="item.is_site_bad==2" class="yuqi" src="@/static/img/youh.png" mode="widthFix"></image>
				<view class="i_r_title">
					<view>第{{i+1}}期</view>
					<view>
						<view>应还日期：{{item.repay_date}}</view>
						<view v-if="item.has_repay==1">实还日期：{{item.true_repay_date}}</view>
					</view>
				</view>
				<!-- <view class="i_r_title"><text>￥{{item.repay_money}}</text></view> -->
				<view class="i_r_info">
					<!-- <view class="i_r_item">
						<view>本期本金</view>
						<view>￥1005.83</view>
					</view>
					<view class="i_r_item">
						<view>本期利息</view>
						<view>￥1005.83</view>
					</view>
					<view class="i_r_item">
						<view>本期利息合计</view>
						<view>￥1005.83</view>
					</view> -->
					<!-- <view class="i_r_item">
						<view>本期起始日期</view>
						<view>2024-01-29</view>
					</view> -->
					<!-- <view class="i_r_item">
						<view>本期还款日期</view>
						<view>{{item.repay_date}}</view>
					</view> -->
					<view class="i_r_items">
						<view class="i_r_item">
							<view>应还金额</view>
							<view>￥{{item.repay_money}}</view>
						</view>
						<view class="i_r_item i_r_item2">
							<view>应还本金：{{item.self_money}}</view>
							<view>应还利息：{{item.interest_money}}</view>
						</view>
					</view>

					<view class="i_r_items">
						<view class="i_r_item">
							<view>已还金额</view>
							<view>￥{{item.true_repay_money}}</view>
						</view>
						<view class="i_r_item i_r_item2">
							<view>已还本金：{{item.true_self_money}}</view>
							<view>已还利息：{{item.true_interest_money}}</view>
						</view>
					</view>

					<view class="i_r_items">
						<view class="i_r_item">
							<view>待还金额</view>
							<view>￥{{item.need_money}}</view>
						</view>
						<view class="i_r_item i_r_item2">
							<view>待还本金：{{item.need_self_money}}</view>
							<view>待还利息：{{item.need_interest_money}}</view>
						</view>
					</view>


					<view class="i_r_item" :class="{'item_160': item.has_repay==0}">
						<!-- <view>待还金额</view>
						<view>￥{{item.need_money}}</view> -->
						<view v-if="item.has_repay==0" class="i_l_btn" @click.stop="jieq(item.id,1)">坏账</view>
						<view v-if="item.has_repay==0" class="i_r_btn" @click.stop="update(item.id)">修改利息</view>
						<view v-if="item.has_repay==0" class="i_r_btn" @click.stop="jieq(item.id,2)">免还</view>
					</view>
					<!-- <view class="i_r_item" v-if="item.has_repay==1">
						<view>实际还款日期</view>
						<view>{{item.true_repay_date}}</view>
					</view> -->
					<!-- <view class="i_r_item">
						<view>累计本金</view>
						<view>￥1005.83</view>
					</view>
					<view class="i_r_item">
						<view>累计利息</view>
						<view>￥1005.83</view>
					</view>
					<view class="i_r_item">
						<view>还款方式</view>
						<view>等额本息</view>
					</view> -->
				</view>
			</view>
		</view>
		<!-- 0 等额本息-修改利息   1先息后本-提前还款    2 到期本息-修改利息  -->
		<!-- <view class="default_btn btn" v-if="deal_status!=5 && loantype==1 " @click="tiqian">提前还款</view>
		<view class="default_btn btn" v-if="deal_status!=5 && loantype!=1 " @click="update">修改利息</view> -->
		<view class="default_btn btn" v-if="loantype==1" @click="lengthen">延长计划</view>
		<!-- <view class="i_btns">
			<view class="" @click="tiqian()">提前还款</view>
			<view class="" @click="lengthen()">延长计划</view>
		</view> -->
		<view class="dowm_bg" v-if="isopen"></view>
		<view class="down" :class="{'bor_32':isopen}" v-if="deal_status!=5">
			<view class="icon" @click="isopen=!isopen">
				<uni-icons color="#999999" v-if="!isopen" type="top" size="24"></uni-icons>
				<uni-icons color="#999999" v-else type="bottom" size="24"></uni-icons>
			</view>
			<view class="d_center" :class="{'pb_30': !isopen}">
				<view>总计：</view>
				<view>￥<text>{{sum}}</text></view>
				<view class="default_btn" @click="config">确认还款</view>
			</view>
			<view class="d_down" v-if="isopen">
				<view class="d_btn" @click="piliang(2)">修改利息</view>
				<view class="d_btn" @click="piliang(1)">批量坏账</view>
				<view class="d_btn" @click="piliang(3)">批量免还</view>
			</view>
		</view>
		<!-- 确认还款 -->
		<uni-popup ref="popup" background-color="#fff" @change="change">
			<view class="box box2">
				<image src="@/static/img/diong3.png" mode="widthFix"></image>
				<view class="h_price">应还款金额：<text>￥{{sum}}</text></view>
				<view class="gou">
					<view class="h_ying" v-if="loantype!=1">
						<view class="h_price">应还本金：<text>￥{{y_benjin}}</text></view>
						<view class="h_price">应还利息：<text>￥{{y_lixi}}</text></view>
					</view>
					<view class="radio" v-if="loantype!=1" @click="is_no = !is_no">
						<uni-icons v-if="is_no" type="checkbox-filled" color="#E99552" size="24"></uni-icons>
						<uni-icons v-else type="circle" color="#999999" size="24"></uni-icons>
						<text>只还本金</text>
					</view>
				</view>
				<view class="text2">
					<image src="@/static/img/box_1.png" mode="widthFix"></image>
					实际还款金额
				</view>
				<input type="number" v-model="money" />
				<view class="text2">
					<image src="@/static/img/box_2.png" mode="widthFix"></image>
					请输入二级密码
				</view>
				<input type="safe-password" password="true" v-model="payPsd" />
				<!-- <view class="radio" v-if="loantype!=1" @click="is_no = !is_no">
					<uni-icons v-if="is_no" type="checkbox-filled" color="#E99552"
						size="24"></uni-icons>
					<uni-icons v-else type="circle" color="#999999" size="24"></uni-icons>
					<text>只还本金</text>
				</view> -->
				<view class="btns">
					<view class="" @click="cancel">取消</view>
					<view class="" @click="yes">确定</view>
				</view>
			</view>
		</uni-popup>

		<!-- 清账弹窗 -->
		<uni-popup ref="popup2" background-color="#fff" @change="change">
			<view class="box box1">
				<!-- <view class="title">温馨提示</view> -->
				<view class="text mt_19">{{j_type==2?'确认用户不需还本期借款吗？':'确认计入坏账吗?'}}</view>
				<input class="" type="safe-password" placeholder="请输入二级密码" password="true" v-model="payPsd2" />
				<view class="btns">
					<view class="" @click="cancel">取消</view>
					<view class="" @click="psdYn(3)">确定</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="popup3" background-color="#fff" @change="change">
			<view class="box box1">
				<!-- <view class="title">温馨提示</view> -->
				<view class="h_price mt_19">全部应还金额：<text>￥{{tiInfo.ti_huan_money}}</text></view>
				<input class="" type="safe-password" placeholder="请输入二级密码" password="true" v-model="payPsd2" />
				<view class="text4">提前还款会将借款一次性还清，并计算违约金!</view>
				<view class="btns">
					<view class="" @click="cancel">取消</view>
					<view class="" @click="psdYn(2)">确定</view>
				</view>
			</view>
		</uni-popup>
		<!-- 提前还款 -->
		<uni-popup ref="popup4" background-color="#fff" @change="change">
			<view class="box box3">
				<image src="@/static/img/diong3.png" mode="widthFix"></image>
				<!-- <view v-if="type==1" class="h_price">本期应还金额：<text>￥{{info.next_need_money}}</text></view> -->
				<view class="h_price">提前还款金额：<text>￥{{tiInfo.self_money}}</text></view>
				<!-- <view class="h_ying">
					<view class="h_price">应还本金：<text>￥{{tiInfo.ti_huan_money}}</text></view>
					<view class="h_price">应还利息：<text>￥{{tiInfo.ti_huan_money}}</text></view>
				</view> -->
				<view class="text2">
					<image src="@/static/img/box_1.png" mode="widthFix"></image>
					实际还款金额
				</view>
				<input type="number" placeholder="请输入还款金额" v-model="money" />
				<view class="text2">
					<image src="@/static/img/box_4.png" mode="widthFix"></image>
					后续每期利息
				</view>
				<input placeholder="请输入利息" type="number" v-model="interest" />
				<view class="text2">
					<image src="@/static/img/box_2.png" mode="widthFix"></image>
					二级密码
				</view>
				<input type="safe-password" placeholder="请输入二级密码" password="true" v-model="payPsd2" />
				<!-- <view class="text3">提前还款将重新计算利息！</view> -->
				<view class="btns">
					<view class="" @click="cancel">取消</view>
					<view class="" @click="psdYn(1)">确定</view>
				</view>
			</view>
		</uni-popup>

		<!-- 延长计划弹窗 -->
		<uni-popup ref="popup5" background-color="#fff" @change="change">
			<view class="box box3">
				<image src="@/static/img/diong3.png" mode="widthFix"></image>
				<view class="text2 mt_30">
					<image src="@/static/img/box_3.png" mode="widthFix"></image>
					延长计划期数
				</view>
				<view class="yan">
					<input type="number" v-model="yanDay" />
					<view>期</view>
				</view>
				<view class="text2">
					<image src="@/static/img/box_2.png" mode="widthFix"></image>
					二级密码
				</view>
				<input type="safe-password" password="true" v-model="payPsd2" />
				<view class="btns">
					<view class="" @click="cancel">取消</view>
					<view class="" @click="psdYn(5)">确定</view>
				</view>
			</view>
		</uni-popup>
		<!-- 修改利息 -->
		<uni-popup ref="popup6" background-color="#fff" @change="change">
			<view class="box box3">
				<image src="@/static/img/diong3.png" mode="widthFix"></image>
				<view class="text2 mt_30">
					<image src="@/static/img/box_4.png" mode="widthFix"></image>
					利息
				</view>
				<input placeholder="请输入利息" type="number" v-model="interest_edit" />
				<view class="text2">
					<image src="@/static/img/box_2.png" mode="widthFix"></image>
					二级密码
				</view>
				<input placeholder="请输入二级密码" type="safe-password" password="true" v-model="payPsd2" />
				<view class="btns">
					<view class="" @click="cancel">取消</view>
					<view class="" @click="editLixi(1)">确定</view>
				</view>
			</view>
		</uni-popup>
		<!-- 批量修改 -->
		<uni-popup ref="popup7" background-color="#fff" @change="change">
			<view class="box box3">
				<image src="@/static/img/diong3.png" mode="widthFix"></image>
				<view class="title2" :class="{'pb_30':pl_type!=2}">批量修改{{pl_type==1?'坏账':pl_type==2?'利息':'免还'}}</view>
				<view class="text2 mt_30" v-if="is_quj">
					<image src="@/static/img/box_6.png" mode="widthFix"></image>
					期数区间
				</view>
				<view class="inputs" v-if="is_quj">
					<input type="number" v-model="start" placeholder="请输入开始期数" />
					<text>至</text>
					<input type="number" v-model="end" placeholder="请输入结束期数" />
				</view>
				<view class="text2 mt_30" v-if="pl_type==2">
					<image src="@/static/img/box_4.png" mode="widthFix"></image>
					利息
				</view>
				<input v-if="pl_type==2" placeholder="请输入利息" type="number" v-model="interest_edit" />
				<view class="text2">
					<image src="@/static/img/box_2.png" mode="widthFix"></image>
					二级密码
				</view>
				<input placeholder="请输入二级密码" type="safe-password" password="true" v-model="payPsd2" />
				<view class="btns">
					<view class="" @click="cancel">取消</view>
					<view class="" @click="psdYn(4)">确定</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		planInfo,
		huanKuan,
		payPassword,
		jieQin,
		tiQian,
		tiqianHuan,
		tiqianHuankuan,
		updateInterest,
		langPlan
	} from '@/common/js/index.js'
	export default {
		data() {
			return {
				topheight: uni.getStorageSync('topHeight'),
				totalheight: uni.getStorageSync('totalHeight'),
				navheight: uni.getStorageSync('navHeight'),
				id: '',
				list: '',
				index: '',
				sum: '0',
				payPsd: '',
				money: '',
				jie_id: '',
				tiInfo: '',
				payPsd2: '',
				loantype: '',
				deal_status: '',
				yanDay: '',
				j_type: '',
				interest: '',
				interest_edit: '',
				is_no: false,
				y_benjin: '',
				y_lixi: '',
				isopen: false,
				u_lixiId: '',
				pl_type: '',
				is_quj: false,
				start: '',
				end: '',
			}
		},
		onLoad(e) {
			console.log(e);
			this.id = e.id;
			this.plan()
		},
		methods: {
			yanc() {
				this.cancel()
				langPlan({deal_id:this.id ,num:this.yanDay }).then(res=>{
					console.log(res);
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
					if (res.code == 200) {
						this.plan()
					}
					this.yanDay = ''
				})
			},
			edit() {
				console.log(this.pl_type);
				if (this.pl_type == 2) this.editLixi(2)
				else this.yes2(2)
			},
			editLixi(e) {
				// console.log('修改利息');
				// return
				var hint
				if (this.is_quj) {
					if (!(this.start && this.start > 0)) {
						hint = '请输入正确的开始期数'
					} else if (!hint && !(this.end && this.end > 0 && this.end > this.start)) {
						hint = '请输入正确的结束期数'
					}
					if (hint) {
						uni.showToast({
							title: hint,
							icon: 'none'
						})
						return
					}
				}
				this.cancel()
				this.isopen = false
				let list = this.list.filter(item => {
					return item.isclick == true
				})
				const result = list.map(item => item.id).join(',');
				updateInterest({
					ids:e==1?this.u_lixiId: result,
					interest: this.interest_edit,
					deal_id: this.id,
					start: this.start,
					end: this.end,
				}).then(res => {
					console.log(res)
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
					if (res.code == 200) {
						this.plan()
					}
					this.start = ''
					this.end = ''
					this.interest_edit = ''
				})
			},
			update(e) {
				this.u_lixiId = e
				this.$refs.popup6.open('center')
			},
			piliang(e) {
				this.pl_type = e
				let list = this.list.filter(item => {
					return item.isclick == true
				})
				if (list.length > 0) {
					this.is_quj = false
					this.start = ''
					this.end = ''
				}else this.is_quj = true
				this.$refs.popup7.open('center')
			},
			lengthen() {
				this.$refs.popup5.open('center')
			},
			psdYn(e) {
				this.cancel()
				payPassword({
					paypassword: this.payPsd2
				}).then(res => {
					console.log(res);
					if (res.code == 200) {
						if (e == 5) this.yanc()
						else if (e == 4) this.edit()
						else if (e == 3) this.yes2(1)
						else this.affirm2(e)
					} else {
						this.payPsd = ''
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
					this.payPsd2 = ''
				})
			},
			affirm2(e) {
				var hint
				// console.log(this.money,this.sum,this.money>this.sum);
				if (this.loantype == 1 && !this.money)
					hint = '请输入实际还款金额'
				if (hint) {
					uni.showToast({
						title: hint,
						icon: 'none'
					})
					return
				}
				tiqianHuankuan({
					deal_id: this.id,
					real_money: e == 1 ? this.money : this.tiInfo.ti_huan_money,
					interest: this.interest
				}).then(res => {
					console.log(res);
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
					if (res.code == 200) {
						setTimeout(function() {
							uni.navigateBack()
						}, 2000)
					}

				})
			},
			tiqian(e) {
				tiQian({
					deal_id: this.id
				}).then(res => {
					this.tiInfo = res.data
					this.interest = this.tiInfo.interest_money
					console.log(res);
				})
				// if (this.loantype == 2) {
				// 	uni.showToast({
				// 		title: '到期还本息不能提前还款！',
				// 		icon: 'none'
				// 	})
				// } else if (this.loantype == 1) {
				this.$refs.popup4.open('center')
				// } else if (this.loantype == 0) {
				// 	this.$refs.popup3.open('center')
				// }

			},
			yes2(e) {
				console.log('修改坏账免还');
				// return
				this.cancel()
				this.isopen = false
				let list = this.list.filter(item => {
					return item.isclick == true
				})
				const result = list.map(item => item.id).join(',');
				jieQin({
					ids: e == 1 ? this.jie_id : !this.is_quj ? result : '',
					type: e == 1 ? this.j_type : this.pl_type == 1 ? 1 : 2, //1坏账 2免还
					deal_id: this.id,
					start: this.start,
					end: this.end,
				}).then(res => {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
					this.plan()
					console.log(res);
				})
			},
			jieq(id, type) {
				this.jie_id = id
				this.j_type = type
				this.$refs.popup2.open('center')
			},
			config() {
				if (this.sum > 0) this.$refs.popup.open('center')
				else {
					uni.showToast({
						title: '请选择还款周期！',
						icon: 'none'
					})
				}
			},
			cancel() {
				this.$refs.popup.close()
				this.$refs.popup2.close()
				this.$refs.popup3.close()
				this.$refs.popup4.close()
				this.$refs.popup5.close()
				this.$refs.popup6.close()
				this.$refs.popup7.close()
			},
			yes() {
				payPassword({
					paypassword: this.payPsd
				}).then(res => {
					console.log(res);
					// this.cancel()
					if (res.code == 200) {
						this.huan()
					} else {
						this.payPsd = ''
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			change(e) {
				console.log("e:", e);
			},
			clickInd(i, e, num) {
				if (num != 1) {
					this.list[i].isclick = !e
					let list = this.list.filter(item => {
						return item.isclick == true
					})
					console.log(list);
					this.sum = (list.reduce((total, item) => total + item.money_num, 0)).toFixed(2);
					this.y_benjin = (list.reduce((total, item) => total + item.y_bj, 0)).toFixed(2);
					this.y_lixi = (list.reduce((total, item) => total + item.y_lx, 0)).toFixed(2);
				}
			},
			huan() {
				let list = this.list.filter(item => {
					return item.isclick == true
				})
				const result = list.map(item => item.id).join(',');
				var hint
				console.log(this.money, this.sum, parseFloat(this.money) > parseFloat(this.sum));
				if (!this.money) hint = '请输入实际还款金额'
				else if (!hint && parseFloat(this.money) > parseFloat(this.sum)) hint = '请输入正确还款金额'
				if (hint) {
					uni.showToast({
						title: hint,
						icon: 'none'
					})
					return
				}
				huanKuan({
					ids: result,
					real_money: this.money,
					is_self: this.is_no ? 1 : 0
				}).then(res => {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
					if (res.code == 200) {
						setTimeout(function() {
							uni.navigateBack()
						}, 2000)
						// uni.navigateBack()
					}
					console.log(res);
				})
			},
			plan() {
				planInfo({
					deal_id: this.id
				}).then(res => {
					console.log(res);
					var list = res.data.list
					for (var i = 0; i < list.length; i++) {
						list[i].isclick = false
						list[i].money_num = parseFloat(list[i].need_money)
						list[i].y_bj = parseFloat(list[i].self_money)
						list[i].y_lx = parseFloat(list[i].interest_money)
					}
					this.list = list
					this.loantype = res.data.loantype
					this.deal_status = res.data.deal_status
					// for (var i = 0; i < this.list.length; i++) {
					// 	console.log(this.list[i].has_repay);
					// 	if (this.list[i].has_repay == 0) {
					// 		this.index = i
					// 		return
					// 	}
					// }

				})
			},
			back() {
				uni.navigateBack()
			}
		},
	}
</script>

<style scoped lang="scss">
	.content {
		/* background: white; */
		overflow: hidden;
		// padding-bottom: 150rpx;
		// position: relative;
	}

	.pb_15 {
		padding-bottom: 200rpx;
	}

	.top {
		width: 100vw;
		// height: 280rpx;
		background: url('../../static/img/loans_bg2.png') no-repeat;
		background-size: cover;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 888;
	}

	.nav {
		width: 100vw;
		position: relative;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 22;

		image {
			width: 16rpx;
			position: absolute;
			bottom: 20rpx;
			left: 30rpx;
		}

		view {
			text-align: center;
			font-size: 31rpx;
		}
	}

	.info {
		z-index: 999;
		margin: 40rpx 30rpx;
		// margin-top: -70rpx !important;
		background-color: white;
		border-radius: 12rpx;
		padding: 30rpx 30rpx 58rpx 20rpx;
		display: flex;
		justify-content: space-between;

		.i_left {
			width: 40rpx;
			// background-color: palegoldenrod;
			// border-left: 6rpx solid #F7E5D9;
			margin: 10rpx 0 0 0;
			position: relative;

			.radio {}

			.dian {
				position: absolute;
				top: 0;
				left: -13rpx;
				width: 20rpx;
				height: 20rpx;
				background-color: #F7E5D9;
				border-radius: 50%;
			}
		}

		.i_right {
			position: relative;

			.i_r_title {
				display: flex;
				// justify-content: space-between;
				align-items: center;
				margin-bottom: 12rpx;

				>view {
					&:nth-of-type(1) {
						font-weight: 500;
					}

					&:nth-of-type(2) {
						font-size: 26rpx;
						color: #999999;
						margin-left: auto;
					}
				}
			}

			.yuqi {
				position: absolute;
				top: 50%;
				left: 50%;
				z-index: 88;
				transform: translate(-50%, -50%);
				display: block;
				width: 256rpx;
			}

			.i_r_btn {
				// min-width: 84rpx;
				height: 40rpx;
				line-height: 40rpx;
				background: #E99552;
				border-radius: 8rpx;
				text-align: center;
				color: white;
				font-size: 24rpx;
				padding: 0 18rpx;
				// margin-left: auto;
				// position: absolute;
				// right: 0;
				// bottom: 0;
			}

			.i_l_btn {
				width: 84rpx;
				height: 40rpx;
				line-height: 40rpx;
				background: #FF534C;
				border-radius: 8rpx;
				text-align: center;
				color: white;
				font-size: 24rpx;
				// margin-left: auto;
				// position: absolute;
				// left: 0;
				// bottom: 0;
			}

			.item_160 {
				height: 70rpx !important;
				align-items: flex-start !important;
				line-height: 70rpx !important;
				align-items: flex-end !important;
				// background-color: pink;
			}

			.i_r_info {
				width: 590rpx;
				// background-color: #FFFBF8;
				// padding-bottom: 40rpx;
				border-radius: 12rpx;
				// margin-top: 12rpx;

				.i_r_items {
					height: 94rpx;
					padding: 30rpx 0 20rpx;
					border-bottom: 2rpx solid #F4F4F4;
				}

				.i_r_item {
					// height: 100rpx;
					// margin: 0 30rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					position: relative;
					font-weight: 500;
				}

				.i_r_item2:nth-child(2) {
					margin-top: 20rpx;
					font-size: 26rpx;
					color: #999999;
					font-weight: 400;
				}
			}
		}
	}

	.dowm_bg {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 888;
		width: 100vw;
		height: 100vh;
		background: rgba(0, 0, 0, 0.4);
	}

	.pb_30 {
		padding-bottom: 30rpx;
	}

	.bor_32 {
		border-radius: 32rpx 32rpx 0 0;
	}

	.down {
		width: 690rpx;
		// height: 120rpx;
		background: #FFFFFF;
		// display: flex;
		// align-items: center;
		padding: 0 30rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 999;
		box-shadow: 0rpx -4rpx 8rpx 0rpx rgba(0, 0, 0, 0.1);

		.icon {
			// background-color: palegoldenrod;
			margin: 0 auto;
			text-align: center;
		}

		.d_center {
			height: 90rpx;
			display: flex;
			align-items: flex-end;
			// background-color: #999999;

			>view {
				&:nth-of-type(1) {}

				&:nth-of-type(2) {
					color: #FF524C;
					flex: 1;
					font-weight: 500;

					text {
						font-size: 40rpx;
					}
				}

				&:nth-of-type(3) {
					width: 272rpx;
				}
			}
		}

		.d_down {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 50rpx 0;

			.d_btn {
				height: 56rpx;
				line-height: 56rpx;
				padding: 0 16rpx;
				text-align: center;
				background: #E99552;
				border-radius: 8rpx;
				color: white;

				&:nth-child(1) {
					background: #FF534C;
				}
			}
		}
	}

	.box {
		overflow: hidden;

		image {
			width: 600rpx;
			display: block;
		}

		.title2 {
			text-align: center;
			font-weight: 500;
			font-size: 36rpx;
			margin: 40rpx 0 0;
		}

		.inputs {
			display: flex;
			justify-content: space-between;
			align-items: center;
			text-align: center;

			text {
				margin-bottom: 30rpx;
			}
		}

		.yan {
			height: 68rpx;
			display: flex;
			align-items: center;
			border: 2rpx solid #F69D5E;
			margin: 0 40rpx 30rpx;
			border-radius: 8rpx;

			input {
				flex: 1;
				border-radius: 8rpx;
				margin: 0 !important;
				padding: 0 16rpx;
				border: none;
				text-align: right;
				font-size: 26rpx;
			}

			view {
				margin: 0 30rpx 0 0;
			}
		}

		.h_price {
			margin: 30rpx 40rpx 40rpx;

			text {
				color: #FF5B5B;
				font-weight: 700;
				font-size: 32rpx
			}
		}

		.h_ying {
			display: flex;
			justify-content: space-between;
			margin: -16rpx 40rpx 40rpx;

			.h_price {
				margin: 0;
				font-size: 25rpx;

				text {
					font-weight: 500;
					font-size: 25rpx
				}
			}
		}

		.gou {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 30rpx;
			margin-top: -10rpx;

			.h_ying {
				display: block;
				margin: 0 40rpx;

				.h_price:nth-child(2) {
					margin-top: 10rpx;
				}

			}

			.radio {
				margin: 0 40rpx;
			}
		}

		.radio {
			display: flex;
			margin: 0 40rpx 30rpx;
			align-items: center;

			text:last-child {
				color: #666666;
				margin-left: 12rpx;
				font-size: 26rpx;
			}
		}

		.inp2 {
			margin-top: 190rpx;
		}

		.mt_19 {
			margin-top: 160rpx;
			margin-bottom: 20rpx;
		}

		.title {
			text-align: center;
			font-weight: 500;
			font-size: 36rpx;
			margin: 180rpx 0 52rpx;
		}

		.text {
			margin-top: 200rpx;
			margin-bottom: 40rpx;
			text-align: center;
			// margin-top: 20rpx;
		}

		.text4 {

			margin: 0 40rpx 20rpx;
			font-size: 25rpx;
			margin-top: 20rpx;
			color: red;
		}

		input {
			height: 68rpx;
			background: #FFFFFF;
			border-radius: 8rpx;
			margin: 0 40rpx 20rpx;
			padding: 0 16rpx;
			border: 2rpx solid #F69D5E;
			font-size: 26rpx;
		}

		.uni-input-placeholder {
			color: #999999;
		}

		.text2 {
			margin: 0 40rpx 20rpx;
			font-size: 28rpx;
			display: flex;
			align-items: center;

			image {
				width: 48rpx;
				margin-right: 16rpx;
			}
		}

		.btns {
			display: flex;
			justify-content: space-between;

			view {
				width: 220rpx;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				font-size: 32rpx;
				font-weight: 500;
				border-radius: 40rpx;
				margin: 22rpx 40rpx;

				&:nth-of-type(1) {
					border: 2rpx solid #FFA19E;
					color: #FF534E;
				}

				&:nth-of-type(2) {
					background: linear-gradient(to right, #F69F60 0%, #FF706D 100%);
					color: white;
				}
			}
		}

		.mt_30 {
			margin-top: 30rpx;
		}
	}

	.box1 {
		width: 600rpx;
		height: 552rpx;
		background: url('@/static/img/diong.png') no-repeat;
		background-size: contain;
	}

	.box2 {
		width: 600rpx;
		// height: 896rpx;
		background-color: white;
		border-radius: 22rpx;
		padding-bottom: 20rpx;
	}

	.box3 {

		width: 650rpx;
		// height: 896rpx;
		background-color: white;
		border-radius: 22rpx;

		image {
			width: 650rpx;
			display: block;
		}

		.h_price {
			margin: 30rpx 40rpx 40rpx;

			text {
				color: #FF5B5B;
				font-weight: 700;
				font-size: 32rpx
			}
		}

		.text3 {
			margin: 0 40rpx;
			font-size: 25rpx;
			margin-top: 20rpx;
			color: red;
		}

		input {
			margin-bottom: 30rpx !important;
		}

		.btns {

			margin: 52rpx 40rpx;

			view {
				margin: 0 !important;
			}
		}

		// background: url('@/static/img/diong2.png') no-repeat;
	}

	/deep/ .uni-popup {
		z-index: 999;
	}

	/deep/ .uni-popup__wrapper {
		background-color: rgba(0, 0, 0, 0) !important;
	}

	.btn {
		background: #E99552;
	}

	.i_btns {
		display: flex;
		justify-content: space-between;
		margin: 60rpx 70rpx;

		view {
			width: 260rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			border-radius: 40rpx;
			font-weight: 500;
			font-size: 32rpx;
			color: #FFFFFF;

			&:nth-of-type(1) {
				background: #E99552;
			}

			&:nth-of-type(2) {
				background: linear-gradient(270deg, #FF5F3B 0%, #FF524F 100%);
			}
		}
	}
</style>